<template>
  <div class="app-popup">
    <van-popup v-model="isShow" :position="position" :round="round" @close="hide" :style="actualStyle">
      <component
        :is="componentName"
        :viewdata="viewdata"
        @viewdataschange="viewDatasChange"
        @close="close"
        class="view-popup-container"
      ></component>
    </van-popup>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Provide, Emit, Watch } from "vue-property-decorator";
import { Subject } from "rxjs";
@Component({
    components: {}
})
export default class AppPopup extends Vue {
    /**
     * 输入组件名
     *
     * @type {string}
     * @memberof AppPopup
     */
    @Prop() public componentName!: string;

    /**
     * 弹出层位置
     *
     * @type {string}
     * @memberof AppPopup
     */
    @Prop() public position!: string;

    /**
     * 是否圆角
     *
     * @type {string}
     * @memberof AppPopup
     */
    @Prop({default:false}) public round?: boolean;

    /**
     * 视图数据
     *
     * @type {any}
     * @memberof AppPopup
     */
    @Prop() public viewdata: any;

    /**
     * 自定义样式
     *
     * @type {object}
     * @memberof AppPopup
     */
    @Prop() public CustomStyle?: object;

    /**
     * 是否全屏
     *
     * @type {boolean}
     * @memberof AppPopup
     */
    @Prop({default:false}) public isFullScreen?: boolean;

    /**
     * 是否展示
     *
     * @type {boolean}
     * @memberof AppPopup
     */
    public isShow: boolean = false;

    /**
     * 可观察对象
     *
     * @type {Subject}
     * @memberof AppPopup
     */
    public subject = new Subject();

    /**
     * 实际的样式
     *
     * @memberof AppPopup
     */
    get actualStyle():any {
        let defaultStyle = this.isFullScreen? {height:"100%", width:"100%"} : {};
        return Object.assign(defaultStyle,this.CustomStyle);
    }

    /**
     * 显示
     *
     * @memberof AppPopup
     */
    public show() {
        this.isShow = true;
        return this.subject;
    }

    /**
     * 隐藏
     *
     * @memberof AppPopup
     */
    public hide(item?: any) {
        this.isShow = false;
        this.subject.next(item);
        this.subject.asObservable();
        document.body.removeChild(this.$el);
        this.$destroy();
    }

    /**
     * 视图数据修改
     *
     * @memberof AppPopup
     */

    public viewDatasChange($event: any) {
        if (!Object.is($event.action, "load") && !Object.is($event.action, "save")) {
            this.hide($event.data);
        }
    }

    /**
     * 视图关闭
     *
     * @memberof AppPopup
     */

    public close(args?: any) {
        args ? this.hide(args.data) : this.hide();
    }
}
</script>
<style lang="less">
.van-popup.van-popup--left,
.van-popup.van-popup--right
{
  height:100%;
}
</style>
